<!--
 * @Descripttion: GGB
 * @version: 1.0
 * @Author: GGB
 * @Date: 2021-12-08 20:44:36
 * @LastEditors: GGB
 * @LastEditTime: 2021-12-09 06:49:18
-->
<template>
    <!-- 标题 -->
    <h1 :style="titleInfo.color">{{ titleInfo.value }}</h1>
    <span>{{ $store.state.counter }}</span>
    <span>{{ doubleCounter }}</span>
    <!-- 新增待办 -->
    <input type="text" v-model="todoName" @keydown.enter="addTodo(newTodo(todoName))" />
    <!-- 待办列表 -->
    <h3 v-for="item in items" :key="item.id">{{ item.title }}</h3>
</template>

<script lang="ts">
import { defineComponent, PropType } from "vue";
import { TitleInfo, Todo } from "../types"
export default defineComponent({
    name: "Comp",
    props: {
        titleInfo: {
            type: Object as PropType<TitleInfo>,
            required: true
        }
    },
    data() {
        return {
            // counter: 1,
            items: [] as Todo[],
            todoName: ""
        }
    },
    created() {
        this.items.push({
            id: 1,
            title: "vue3+ts",
            complated: false
        });
    },
    computed: {
        doubleCounter(): number {
            return this.$store.state.counter * 2
        }
    },
    methods: {
        newTodo(todoName: string): Todo {
            return {
                id: this.items.length + 1,
                title: todoName,
                complated: false
            }
        },
        addTodo(todo: Todo): void {
            this.items.push(todo)
            this.todoName = ""
        }
    }
})
</script>

<style>
</style>


